import { getContext } from '../lib/context.js';
import { showToast } from '../lib/toast.js';
import { verify } from '../lib/baseInfo.js';
import { closeModal } from '../lib/modal.js';

const MODAL_ID = 'base-info-modal';

export default {
    props: {
        baseInfo: Object,
    },
    methods: {
        inputChangeHandler(event, key) {
            event.preventDefault();
            const context = getContext();
            context.baseInfo[key] = event.target.value;
        },
        submit() {
            console.log('保存表单内容');
            const errorMsg = verify();
            if (typeof errorMsg === 'string') {
                showToast(errorMsg);
                return;
            }
            closeModal(MODAL_ID);
        },
        clear() {
            console.log('清除表单内容');
            const context = getContext();
            context.baseInfo = {};
        },
        close() {
            console.log('关闭表单弹窗');
            closeModal(MODAL_ID);
        },
    },
    /* html */
    template: `
        <form class="base-info-form">
            <div class="title">录入基本信息</div>
            <div class="section">
                <div class="label">演出名称</div>
                <input placeholder="请输入演出名称"
                    v-on:input="inputChangeHandler.call(this, $event, 'performName')"
                    :value="baseInfo.performName" />
            </div>
            <div class="section">
                <div class="label">演出时间</div>
                <input type="datetime-local" placeholder="请输入演出时间"
                    v-on:input="inputChangeHandler.call(this, $event, 'performTime')"
                    :value="baseInfo.performTime" />
            </div>
            <div class="section">
                <div class="label">演出地点</div>
                <input placeholder="请输入演出地点，例如：广东省东莞市大朗镇东莞银行篮球中心"
                    v-on:input="inputChangeHandler.call(this, $event, 'performLocation')"
                    :value="baseInfo.performLocation" />
            </div>
            <div class="section align-right">
                <div class="button" v-on:click="clear">清除</div>
                <div class="button" v-on:click="close">关闭</div>
                <div class="button primary" v-on:click="submit">保存</div>
            </div>
        </form>
    `,
};
